<template>
    <div class='component-toggle' :class='{"show":showContent}'>
        <div class="component-toggle__header" @click='showContent=!showContent'>
            <slot name='header'></slot>
        </div>
        <div class="component-toggle__content" v-show='showContent'>
            <slot name='content'></slot>
        </div>
    </div>
</template>

<script>

    export default {
        props:{
            show:{
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                showContent:this.show
            }
        },
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
</style>


